$selectRadius: 2px;
$selectFontSize: 14px;

$selectWidthXL: 320px;
$selectHeightXL: 40px;
$selectWidthMD: 242px;
$selectHeightMD: 26px;
$selectWidthSM: 82px;
$selectHeightSM: 26px;

/* xl */
.select-xl {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $selectRadius;
  height: $selectHeightXL;
  width: $selectWidthXL;
  background: $White !important;
  font-size: $selectFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
}

.select-xl:focus {
  border: 1px solid $Primary;
}

.select-xl:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

/* md */
form select,
.select-md {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $selectRadius;
  height: $selectHeightMD;
  width: $selectWidthMD;
  background: $White !important;
  font-size: $selectFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
}

form select:focus,
.select-md:focus {
  border: 1px solid $Primary;
}

form select:disabled,
.select-md:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}

/* sm */
.select-sm {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 11px;
  border-radius: $selectRadius;
  height: $selectHeightSM;
  width: $selectWidthSM;
  background: $White !important;
  font-size: $selectFontSize;
  color: $Black;
  border: 1px solid $Gray_light;
  outline: none;
}

.select-sm:focus {
  border: 1px solid $Primary;
}

.select-sm:disabled {
  background-color: $Gray_lighter;
  border: 1px solid $Gray;
}
